<!doctype html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
		 crossorigin="anonymous">
		<link rel="stylesheet" href="./css/index-style.css">
		<title>商城-首页</title>
	</head>
	<body>
		<nav class="navbar sticky-top navbar-light bg-light" id="topNav">
			<a class="navbar-brand font-italic font-weight-bolder font-weight-lighter" href="#">小商小贩</a>
			<div class="btn-group" id="topUser" role="group" aria-label="Basic example">
			</div>
		</nav>
		<div id="contentX">
			<div class="row list-rowX">
				<div class="col-3 list-colX" id="listColX">
					<div class="nav flex-column nav-pills" id="v-pills-tab">
					</div>
				</div>
				<div class="col-9 content-colX" id="contentColX">
					<div class="tab-content" id="v-pills-tabContent">
						<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="collapse" id="collapseBtnCalc" style="position: absolute;width: 100%;">
			<div class="card card-body" style="width: 100%;overflow-y: scroll;height: 400px;">
				<table class="table">
					<thead class="thead-light">
						<tr>
							<th scope="col" colspan="3">购物车</th>
						</tr>
					</thead>
					<tbody id="carTabBody" class="car-tab-body">
					</tbody>
				</table>
				<button class="btn btn-info" id="toOrder">生成订单</button>
			</div>
		</div>
		<nav class="navbar fixed-bottom navbar-light bg-light" id="lastNav">
			<a class="navbar-brand" href="#">购物车<span class="badge badge-pill badge-success" id="badgeX">0</span></a>
			<span id="totalPricr">总价：¥0.0</span>
			<button class="btn btn-info" id="calcBtn" data-toggle="collapse" data-target="#collapseBtnCalc">去结算</button>
		</nav>


		<div class="toggle-body" id="toggleBody">
			<div class="toggle-box">
				<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
					<div class="carousel-inner" id="imgX">

					</div>
					<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
						<span class="carousel-control-prev-icon" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</a>
					<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
						<span class="carousel-control-next-icon" aria-hidden="true"></span>
						<span class="sr-only">Next</span>
					</a>
				</div>
				<div class="content-toggle" id="contentToggle">
				</div>
				<div class="d-flex justify-content-between last-toggle">
					<span id="priceToggle">¥18</span>
					<span>
						<button id="calcDeck" class="btn btn-light" style="margin-right: 10px;">-</button>
						<span id="sumX" style="display: inline-block;width: 20px;text-align: center;">1</span>
						<button id="calcAdd" class="btn btn-light" style="margin-left: 10px;">+</button>
					</span>
				</div>
				<button class="btn btn-warning btn-lg btn-block" style="" id="addCar">加入购物车</button>
				<button class="btn btn-secondary btn-lg btn-block" style="" id="toggleClose">关闭</button>

			</div>
		</div>

		<script src="js/jquery.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
		 crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
		 crossorigin="anonymous"></script>
		<script src="js/index-page.js"></script>

	</body>
</html>
